<template>
  <div class="interview-practice-container">
    <!-- <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">面试练习</h1>
          <div class="page-subtitle">通过AI面试官进行模拟面试练习，提升面试技能</div>
        </div>
        <div class="header-actions">
          <el-button @click="refreshData" :loading="loading">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>
    </div> -->

    <div class="page-content">
      <!-- 功能介绍卡片 -->
      <div class="intro-section">
        <el-card class="intro-card" shadow="never">
          <div class="intro-content">
            <div class="intro-icon">
              <el-icon><ChatDotRound /></el-icon>
            </div>
            <div class="intro-text">
              <h3>AI面试官练习</h3>
              <p>与智能AI面试官进行一对一模拟面试，获得实时反馈和专业建议，帮助您在真实面试中表现更出色。</p>
              <div class="intro-features">
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>智能问题生成</span>
                </div>
                <!-- <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>实时语音交互</span>
                </div> -->
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>专业评估反馈</span>
                </div>
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>个性化建议</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 练习模式选择 -->
      <div class="mode-section">
        <el-card class="mode-card" shadow="never">
          <template #header>
            <div class="card-header">
              <h3>选择练习模式</h3>
              <p>根据您的需求选择合适的面试练习模式</p>
            </div>
          </template>

          <el-row :gutter="24">
            <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
              <div class="mode-item" @click="startPractice('basic')">
                <div class="mode-icon basic">
                  <el-icon><User /></el-icon>
                </div>
                <div class="mode-info">
                  <h4>面试练习模式</h4>
                  <p>适合初学者，包含常见的基础面试问题</p>
                  <div class="mode-meta">
                    <span class="duration">15-20分钟</span>
                    <span class="difficulty easy">简单</span>
                  </div>
                </div>
              </div>
            </el-col>
<!-- 
            <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <div class="mode-item" @click="startPractice('technical')">
                <div class="mode-icon technical">
                  <el-icon><Monitor /></el-icon>
                </div>
                <div class="mode-info">
                  <h4>技术面试</h4>
                  <p>专业技术问题，考察专业技能和解决问题能力</p>
                  <div class="mode-meta">
                    <span class="duration">30-45分钟</span>
                    <span class="difficulty medium">中等</span>
                  </div>
                </div>
              </div>
            </el-col>

            <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <div class="mode-item" @click="startPractice('behavioral')">
                <div class="mode-icon behavioral">
                  <el-icon><ChatLineRound /></el-icon>
                </div>
                <div class="mode-info">
                  <h4>行为面试</h4>
                  <p>情景化问题，考察沟通能力和团队协作</p>
                  <div class="mode-meta">
                    <span class="duration">20-30分钟</span>
                    <span class="difficulty medium">中等</span>
                  </div>
                </div>
              </div>
            </el-col> -->

            <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
              <div class="mode-item" @click="startPractice('comprehensive')">
                <div class="mode-icon comprehensive">
                  <el-icon><Trophy /></el-icon>
                </div>
                <div class="mode-info">
                  <h4>综合面试</h4>
                  <p>全面的面试体验，包含多种类型的问题</p>
                  <div class="mode-meta">
                    <span class="duration">45-60分钟</span>
                    <span class="difficulty hard">困难</span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <!-- 练习记录 -->
      <div class="history-section">
        <el-card class="history-card" shadow="never">
          <template #header>
            <div class="card-header">
              <h3>练习记录</h3>
              <p>查看您的面试练习历史和进步轨迹</p>
            </div>
          </template>

          <div v-if="practiceHistory.length === 0" class="empty-state">
            <el-empty description="暂无练习记录">
              <el-button type="primary" @click="startPractice('basic')">
                开始第一次练习
              </el-button>
            </el-empty>
          </div>

          <div v-else class="history-list">
            <div
              v-for="record in practiceHistory"
              :key="record.id"
              class="history-item"
            >
              <div class="history-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="history-info">
                <div class="history-title">{{ record.title }}</div>
                <div class="history-meta">
                  <span class="history-type">{{ record.type_display }}</span>
                  <span class="history-date">{{ formatDateTime(record.created_at) }}</span>
                  <span class="history-duration">{{ record.duration }}分钟</span>
                </div>
              </div>
              <div class="history-score">
                <div class="score-value">{{ record.score || '--' }}</div>
                <div class="score-label">评分</div>
              </div>
              <div class="history-actions">
                <el-button size="small" @click="viewReport(record)">
                  查看报告
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- AI面试官预览 -->
      <!-- <div class="ai-preview-section">
        <el-card class="ai-preview-card" shadow="never">
          <template #header>
            <div class="card-header">
              <h3>AI面试官预览</h3>
              <p>体验未来的智能面试功能</p>
            </div>
          </template>

          <div class="ai-preview-content">
            <div class="ai-features-grid">
              <div class="feature-card">
                <div class="feature-icon voice">
                  <el-icon><Microphone /></el-icon>
                </div>
                <h4>智能语音交互</h4>
                <p>支持语音问答，自然对话体验</p>
              </div>

              <div class="feature-card">
                <div class="feature-icon analysis">
                  <el-icon><DataAnalysis /></el-icon>
                </div>
                <h4>实时表现分析</h4>
                <p>分析语调、表情、回答质量</p>
              </div>

              <div class="feature-card">
                <div class="feature-icon adaptive">
                  <el-icon><MagicStick /></el-icon>
                </div>
                <h4>自适应问题</h4>
                <p>根据表现调整问题难度</p>
              </div>

              <div class="feature-card">
                <div class="feature-icon report">
                  <el-icon><PieChart /></el-icon>
                </div>
                <h4>详细报告</h4>
                <p>生成专业的面试评估报告</p>
              </div>
            </div>

            <div class="ai-demo-section">
              <div class="demo-chat">
                <div class="chat-header">
                  <div class="ai-avatar">
                    <el-icon><UserFilled /></el-icon>
                  </div>
                  <div class="ai-info">
                    <h4>AI面试官</h4>
                    <span class="status online">在线</span>
                  </div>
                </div>

                <div class="chat-messages">
                  <div class="message ai-message">
                    <div class="message-content">
                      您好！我是您的AI面试官。今天我们将进行一场模拟面试，请放松心情，就像真实面试一样回答问题。
                    </div>
                    <div class="message-time">刚刚</div>
                  </div>

                  <div class="message ai-message">
                    <div class="message-content">
                      首先，请您简单介绍一下自己，包括您的教育背景和主要技能。
                    </div>
                    <div class="message-time">刚刚</div>
                  </div>

                  <div class="message user-message">
                    <div class="message-content">
                      您好！我是一名计算机科学专业的学生...
                    </div>
                    <div class="message-time">刚刚</div>
                  </div>
                </div>

                <div class="chat-input-area">
                  <div class="input-placeholder">
                    <el-icon><Microphone /></el-icon>
                    <span>点击开始语音回答或输入文字</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div> -->

      <!-- 使用提示 -->
      <div class="tips-section">
        <el-card class="tips-card" shadow="never">
          <template #header>
            <div class="card-header">
              <h3>使用提示</h3>
            </div>
          </template>

          <div class="tips-content">
            <div class="tip-item">
              <div class="tip-icon">
                <el-icon><InfoFilled /></el-icon>
              </div>
              <div class="tip-text">
                <h4>准备工作</h4>
                <p>确保您的设备麦克风和摄像头工作正常，选择安静的环境进行练习。</p>
              </div>
            </div>

            <div class="tip-item">
              <div class="tip-icon">
                <el-icon><Clock /></el-icon>
              </div>
              <div class="tip-text">
                <h4>时间安排</h4>
                <p>建议每次练习时间不少于15分钟，每周进行2-3次练习以保持状态。</p>
              </div>
            </div>

            <div class="tip-item">
              <div class="tip-icon">
                <el-icon><Star /></el-icon>
              </div>
              <div class="tip-text">
                <h4>练习建议</h4>
                <p>从基础模式开始，逐步提升难度。认真对待每次练习，就像真实面试一样。</p>
              </div>
            </div>

            <div class="tip-item">
              <div class="tip-icon">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="tip-text">
                <h4>持续改进</h4>
                <p>仔细阅读AI反馈报告，针对薄弱环节进行重点练习和改进。</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 岗位选择对话框 -->
    <el-dialog
      v-model="showJobSelectionDialog"
      title="选择面试岗位"
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="job-selection-content">
        <div class="job-selection-header">
          <p>请选择您要练习的面试岗位，AI面试官将根据岗位要求为您提供针对性的面试问题。</p>
        </div>

        <div class="job-list" v-loading="jobSelectionLoading">
          <div
            v-for="job in jobList"
            :key="job.id"
            class="job-item"
            :class="{ 'selected': selectedJob?.id === job.id }"
            @click="selectedJob = job"
          >
            <div class="job-info">
              <div class="job-title">{{ job.title }}</div>
              <div class="job-company">{{ job.company_info?.name || '未知公司' }}</div>
              <div class="job-meta">
                <span class="job-location">{{ job.work_location }}</span>
                <span class="job-type">{{ getJobTypeText(job.job_type) }}</span>
                <span class="job-salary" v-if="job.salary_range">{{ job.salary_range }}</span>
              </div>
            </div>
            <div class="job-select-icon" v-if="selectedJob?.id === job.id">
              <el-icon><Check /></el-icon>
            </div>
          </div>

          <div v-if="jobList.length === 0 && !jobSelectionLoading" class="empty-jobs">
            <el-empty description="暂无可用岗位" />
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showJobSelectionDialog = false">取消</el-button>
          <el-button
            type="primary"
            @click="startInterviewPractice"
            :disabled="!selectedJob"
          >
            开始练习
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 即将推出提示 -->
    <el-dialog
      v-model="showComingSoonDialog"
      title="功能即将推出"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="coming-soon-content">
        <div class="coming-soon-icon">
          <el-icon><Tools /></el-icon>
        </div>
        <h3>AI面试官功能正在开发中</h3>
        <p>我们正在努力完善AI面试官功能，为您提供更好的面试练习体验。</p>
        <div class="coming-soon-features">
          <div class="feature-item">
            <el-icon><Check /></el-icon>
            <span>智能语音识别与合成</span>
          </div>
          <div class="feature-item">
            <el-icon><Check /></el-icon>
            <span>个性化问题推荐</span>
          </div>
          <div class="feature-item">
            <el-icon><Check /></el-icon>
            <span>实时表情与语调分析</span>
          </div>
          <div class="feature-item">
            <el-icon><Check /></el-icon>
            <span>详细的面试报告</span>
          </div>
        </div>
        <p class="coming-soon-note">
          预计将在下个版本中发布，敬请期待！
        </p>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="showComingSoonDialog = false">
            我知道了
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 练习记录详情对话框 -->
    <el-dialog
      v-model="showRecordDialog"
      title="练习记录详情"
      width="900px"
      :close-on-click-modal="false"
    >
      <div class="record-detail-content" v-loading="recordLoading">
        <div v-if="recordDetail" class="record-info">
          <div class="record-header">
            <h3>{{ recordDetail.job_title }}</h3>
            <p>{{ recordDetail.company_name }} - {{ formatDateTime(recordDetail.created_at) }}</p>
            <div class="record-meta">
              <span class="duration">练习时长: {{ recordDetail.duration || '--' }}分钟</span>
              <span class="message-count">消息数量: {{ recordDetail.message_count || 0 }}条</span>
            </div>
          </div>

          <div class="messages-history">
            <h4>对话记录</h4>
            <div class="messages-list">
              <div
                v-for="message in recordDetail.messages"
                :key="message.id"
                class="history-message"
                :class="{ 'user-message': message.role === 'user', 'ai-message': message.role === 'assistant' }"
              >
                <div class="message-role">
                  <el-icon v-if="message.role === 'user'"><User /></el-icon>
                  <el-icon v-else><Cpu /></el-icon>
                  <span>{{ message.role === 'user' ? '我' : 'AI面试官' }}</span>
                </div>
                <div class="message-content">
                  <div class="message-text">{{ message.content }}</div>
                  <div class="message-time">{{ formatTime(message.timestamp) }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-else-if="!recordLoading" class="empty-record">
          <el-empty description="无法加载练习记录详情" />
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showRecordDialog = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import {
  Refresh, ChatDotRound, Check, User, Monitor, ChatLineRound,
  Trophy, Document, InfoFilled, Clock, Star, TrendCharts, Tools,
  Microphone, DataAnalysis, MagicStick, PieChart, UserFilled, Cpu
} from '@element-plus/icons-vue'
import { formatDateTime } from '@/utils/format'
import { jobApi } from '@/api/jobs'
import { interviewPracticeApi } from '@/api/interview'

// 响应式数据
const router = useRouter()
const loading = ref(false)
const showComingSoonDialog = ref(false)
const showJobSelectionDialog = ref(false)
const jobSelectionLoading = ref(false)

// 练习记录
const practiceHistory = ref([])

// 岗位列表
const jobList = ref([])
const selectedJob = ref(null)

// 练习记录详情
const showRecordDialog = ref(false)
const selectedRecord = ref(null)
const recordDetail = ref(null)
const recordLoading = ref(false)

// 开始练习
const startPractice = (mode) => {
  console.log('开始练习:', mode)
  if (mode === 'basic') {
    // 显示岗位选择对话框
    showJobSelectionDialog.value = true
    fetchJobList()
  } else {
    showComingSoonDialog.value = true
  }
}

// 获取岗位列表
const fetchJobList = async () => {
  jobSelectionLoading.value = true
  try {
    const response = await jobApi.getJobList({
      status: 'published',
      page_size: 100 // 获取更多岗位供选择
    })
    jobList.value = response.data.results || []
  } catch (error) {
    console.error('获取岗位列表失败:', error)
    ElMessage.error('获取岗位列表失败')
    jobList.value = []
  } finally {
    jobSelectionLoading.value = false
  }
}

// 开始面试练习
const startInterviewPractice = () => {
  if (!selectedJob.value) {
    ElMessage.warning('请选择一个岗位')
    return
  }

  // 跳转到面试练习聊天页面
  router.push({
    name: 'InterviewPracticeChat',
    params: {
      jobId: selectedJob.value.id
    },
    query: {
      jobTitle: selectedJob.value.title,
      companyName: selectedJob.value.company_info?.name || '未知公司'
    }
  })
}

// 查看报告
const viewReport = async (record) => {
  selectedRecord.value = record
  showRecordDialog.value = true
  recordLoading.value = true

  try {
    const response = await interviewPracticeApi.getPracticeRecordDetail(record.id)
    recordDetail.value = response.data
  } catch (error) {
    console.error('获取练习记录详情失败:', error)
    ElMessage.error('获取练习记录详情失败')
    recordDetail.value = null
  } finally {
    recordLoading.value = false
  }
}

// 刷新数据
const refreshData = async () => {
  await fetchPracticeHistory()
}

// 获取练习记录
const fetchPracticeHistory = async () => {
  try {
    const response = await interviewPracticeApi.getPracticeRecords()
    practiceHistory.value = response.data.results || []
  } catch (error) {
    console.error('获取练习记录失败:', error)
    practiceHistory.value = []
  }
}

// 工具函数
const getJobTypeText = (type) => {
  const typeMap = {
    'full_time': '全职',
    'part_time': '兼职',
    'internship': '实习',
    'contract': '合同工',
    'remote': '远程'
  }
  return typeMap[type] || type
}

// 格式化时间
const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 初始化
onMounted(() => {
  refreshData()
})
</script>

<style scoped>
.interview-practice-container {
  min-height: 100vh;
  background: var(--el-bg-color-page);
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease;
}

.page-header {
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color);
  transition: all 0.3s ease;
  padding: 24px 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.page-content {
  flex: 1;
  padding: 24px 32px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.intro-section {
  margin-bottom: 32px;
}

.intro-card {
  border: 1px solid var(--el-border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--el-color-primary-light-9);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px var(--el-box-shadow-light);
}

.intro-card:hover {
  box-shadow: 0 8px 24px var(--el-box-shadow);
  transform: translateY(-2px);
}

.intro-card .intro-content {
  color: var(--el-text-color-primary);
}

/* 深色主题下的样式 */
html.dark .intro-card {
  background: var(--el-color-primary);
}

html.dark .intro-card .intro-content {
  color: white;
}

.intro-content {
  display: flex;
  align-items: center;
  padding: 32px;
}

.intro-icon {
  width: 80px;
  height: 80px;
  background: var(--el-color-primary-light-7);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24px;
  font-size: 36px;
  color: var(--el-color-primary);
  box-shadow: 0 2px 8px var(--el-box-shadow-light);
  border: 1px solid var(--el-color-primary-light-5);
  transition: all 0.3s ease;
}

/* 深色主题下的图标样式 */
html.dark .intro-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.intro-text h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--el-text-color-primary);
}

.intro-text p {
  font-size: 16px;
  margin: 0 0 20px 0;
  color: var(--el-text-color-regular);
  line-height: 1.6;
}

/* 深色主题下的文字样式 */
html.dark .intro-text h3 {
  color: white;
}

html.dark .intro-text p {
  color: rgba(255, 255, 255, 0.95);
}

.intro-features {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-regular);
}

.feature-item .el-icon {
  color: var(--el-color-success);
  background: var(--el-color-success-light-9);
  border-radius: 50%;
  padding: 4px;
  transition: all 0.3s ease;
}

/* 深色主题下的特性项样式 */
html.dark .feature-item {
  color: rgba(255, 255, 255, 0.95);
}

html.dark .feature-item .el-icon {
  color: #10b981;
  background: rgba(255, 255, 255, 0.2);
}

.mode-section {
  margin-bottom: 32px;
}

.mode-card {
  border: 1px solid var(--el-border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--el-bg-color);
  transition: all 0.3s ease;
}

.card-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  margin: 0 0 4px 0;
}

.card-header p {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin: 0;
}

.mode-item {
  background: var(--el-bg-color);
  border: 2px solid var(--el-border-color);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mode-item:hover {
  border-color: var(--el-color-primary);
  box-shadow: 0 8px 25px var(--el-box-shadow-light);
  transform: translateY(-4px);
}

.mode-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 28px;
  color: white;
}

.mode-icon.basic {
  background: linear-gradient(135deg, #10b981, #059669);
}

.mode-icon.technical {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.mode-icon.behavioral {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.mode-icon.comprehensive {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.mode-info {
  flex: 1;
}

.mode-info h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 8px 0;
}

.mode-info p {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.mode-meta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.duration {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  background: var(--el-fill-color-light);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.difficulty {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
}

.difficulty.easy {
  background: #dcfce7;
  color: #166534;
}

.difficulty.medium {
  background: #fef3c7;
  color: #92400e;
}

.difficulty.hard {
  background: #fecaca;
  color: #991b1b;
}

.history-section,
.ai-preview-section,
.tips-section {
  margin-bottom: 32px;
}

.history-card,
.ai-preview-card,
.tips-card {
  border: 1px solid var(--el-border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--el-bg-color);
  transition: all 0.3s ease;
}

.empty-state {
  padding: 40px;
  text-align: center;
}

.history-list {
  padding: 0;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s ease;
}

.history-item:hover {
  background-color: var(--el-fill-color-lighter);
}

.history-item:last-child {
  border-bottom: none;
}

.history-icon {
  width: 48px;
  height: 48px;
  background: var(--el-fill-color-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: var(--el-text-color-secondary);
  font-size: 20px;
  transition: all 0.3s ease;
}

.history-info {
  flex: 1;
}

.history-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
}

.history-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.history-type {
  background: #e0e7ff;
  color: #3730a3;
  padding: 2px 6px;
  border-radius: 4px;
}

.history-score {
  text-align: center;
  margin-right: 16px;
}

.score-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--el-text-color-primary);
}

.score-label {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.ai-preview-content {
  padding: 0;
}

.ai-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
  padding: 24px;
}

.feature-card {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  border-color: var(--el-color-primary);
  box-shadow: 0 4px 12px var(--el-box-shadow-light);
  transform: translateY(-2px);
}

.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  color: white;
}

.feature-icon.voice {
  background: linear-gradient(135deg, #ec4899, #be185d);
}

.feature-icon.analysis {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.feature-icon.adaptive {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.feature-icon.report {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.feature-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 8px 0;
}

.feature-card p {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin: 0;
  line-height: 1.5;
}

.ai-demo-section {
  background: var(--el-fill-color-lighter);
  border-top: 1px solid var(--el-border-color);
  padding: 24px;
  transition: background-color 0.3s ease;
}

.demo-chat {
  max-width: 600px;
  margin: 0 auto;
  background: var(--el-bg-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--el-box-shadow);
  transition: all 0.3s ease;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.ai-avatar {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 24px;
}

.ai-info h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 2px 0;
}

.status {
  font-size: 12px;
  opacity: 0.9;
}

.status.online {
  color: #10b981;
}

.chat-messages {
  padding: 20px;
  max-height: 300px;
  overflow-y: auto;
}

.message {
  margin-bottom: 16px;
}

.message:last-child {
  margin-bottom: 0;
}

.ai-message .message-content {
  background: var(--el-fill-color-light);
  color: var(--el-text-color-primary);
  padding: 12px 16px;
  border-radius: 18px 18px 18px 4px;
  max-width: 80%;
  display: inline-block;
  transition: all 0.3s ease;
}

.user-message {
  text-align: right;
}

.user-message .message-content {
  background: var(--el-color-primary);
  color: white;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  max-width: 80%;
  display: inline-block;
  transition: all 0.3s ease;
}

.message-time {
  font-size: 11px;
  color: var(--el-text-color-placeholder);
  margin-top: 4px;
}

.chat-input-area {
  padding: 16px 20px;
  background: var(--el-fill-color-lighter);
  border-top: 1px solid var(--el-border-color);
  transition: all 0.3s ease;
}

.input-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--el-bg-color);
  border: 2px dashed var(--el-border-color);
  border-radius: 12px;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.input-placeholder:hover {
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
}

.tips-content {
  padding: 0;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}

.tip-item:last-child {
  border-bottom: none;
}

.tip-icon {
  width: 40px;
  height: 40px;
  background: var(--el-color-info-light-9);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: var(--el-color-info);
  font-size: 18px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.tip-text h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 4px 0;
}

.tip-text p {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin: 0;
  line-height: 1.5;
}

.coming-soon-content {
  text-align: center;
  padding: 20px;
}

.coming-soon-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
  font-size: 36px;
}

.coming-soon-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.coming-soon-content p {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.coming-soon-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.coming-soon-features .feature-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
}

.coming-soon-features .feature-item .el-icon {
  color: #10b981;
}

.coming-soon-note {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
}

.dialog-footer {
  text-align: center;
}

/* 岗位选择对话框样式 */
.job-selection-content {
  padding: 0;
}

.job-selection-header {
  margin-bottom: 20px;
}

.job-selection-header p {
  color: var(--el-text-color-secondary);
  margin: 0;
  line-height: 1.6;
}

.job-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
}

.job-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  cursor: pointer;
  transition: all 0.2s ease;
}

.job-item:last-child {
  border-bottom: none;
}

.job-item:hover {
  background-color: var(--el-fill-color-lighter);
}

.job-item.selected {
  background-color: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-7);
}

.job-info {
  flex: 1;
}

.job-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
}

.job-company {
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin-bottom: 8px;
}

.job-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.job-location,
.job-type,
.job-salary {
  background: var(--el-fill-color-light);
  padding: 2px 6px;
  border-radius: 4px;
}

.job-select-icon {
  width: 24px;
  height: 24px;
  background: var(--el-color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

.empty-jobs {
  padding: 40px;
  text-align: center;
}

/* 练习记录详情对话框样式 */
.record-detail-content {
  padding: 0;
}

.record-info {
  padding: 0;
}

.record-header {
  padding: 20px;
  background: var(--el-fill-color-lighter);
  border-radius: 8px;
  margin-bottom: 20px;
}

.record-header h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.record-header p {
  margin: 0 0 12px 0;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.record-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
}

.record-meta span {
  background: var(--el-bg-color);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--el-text-color-regular);
}

.messages-history h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.messages-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  padding: 16px;
}

.history-message {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;
  gap: 12px;
}

.history-message:last-child {
  margin-bottom: 0;
}

.history-message.user-message {
  flex-direction: row-reverse;
}

.message-role {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
}

.message-role .el-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.user-message .message-role .el-icon {
  background: var(--el-color-primary);
  color: white;
}

.ai-message .message-role .el-icon {
  background: var(--el-color-info-light-8);
  color: var(--el-color-info);
}

.message-role span {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  text-align: center;
}

.history-message .message-content {
  flex: 1;
  max-width: calc(100% - 80px);
}

.user-message .message-content {
  text-align: right;
}

.history-message .message-text {
  background: var(--el-bg-color);
  padding: 10px 14px;
  border-radius: 10px;
  line-height: 1.5;
  word-wrap: break-word;
  border: 1px solid var(--el-border-color-lighter);
}

.user-message .message-text {
  background: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-7);
}

.history-message .message-time {
  font-size: 11px;
  color: var(--el-text-color-placeholder);
  margin-top: 4px;
}

.empty-record {
  padding: 40px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .page-content {
    padding: 20px 24px;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px 20px;
  }

  .header-content {
    padding: 0 20px;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .intro-content {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }

  .intro-icon {
    margin-right: 0;
    margin-bottom: 16px;
  }

  .intro-features {
    justify-content: center;
  }

  .mode-item {
    padding: 20px;
  }

  .history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .history-score {
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 20px 16px;
  }

  .page-content {
    padding: 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .intro-content {
    padding: 20px;
  }

  .intro-features {
    flex-direction: column;
    gap: 12px;
  }

  .mode-meta {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}
</style>
